<div class="layui-card">
    <div class="layui-card-body">


        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">{{ __('user.grant_role') }}</li>
                <li>{{ __('user.grant_menu') }}</li>
                <li>{{ __('user.grant_rule') }}</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="layui-row">
                        <div class="layui-col-md4 layui-col-md-offset3">
                            {% if roles %}
                                <form class="layui-form">
                                    <input type="hidden" name="user_id" value="{{ user_id }}">
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            {% for item in  roles %}
                                                <br/>
                                                <input type="checkbox"
                                                       name="role_ids[]"
                                                       value="{{ item.id }}"
                                                       title="{{ item.name }}"
                                                        {% if user_roles is iterable  and (item.id in user_roles) %} checked {% endif %}
                                                >
                                            {% endfor %}
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block mt20">
                                            <button class="layui-btn layui-btn-normal layui-btn-sm " lay-submit
                                                    lay-filter="save-user-role">
                                                {{ __('btn.save') }}
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            {% endif %}
                        </div>
                    </div>
                </div>


                <div class="layui-tab-item">
                    <div class="layui-row">
                        <div class="layui-col-md4 layui-col-md-offset4">
                            <div id="menu-tree"></div>
                            <div class="mt10 ml20 text-left">
                                <button class="layui-btn layui-btn-normal layui-btn-sm " lay-submit
                                        lay-filter="save-user-menu">
                                    {{ __('btn.save') }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">

                    <form class="layui-form">

                        {% include 'permission/rules.twig' %}

                        <div class="mt10 text-center">
                            <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit
                                    lay-filter="save-user-rule">
                                {{ __('btn.save') }}
                            </button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>

</div>

<script type="text/javascript">
    layui.use(['http', 'form', 'toast', 'tree'], function () {
        let http = layui.http;
        let form = layui.form;
        let toast = layui.toast;
        let tree = layui.tree;

        let menus = JSON.parse('{{ menus|json_encode|raw }}');
        let user_id = '{{ user_id }}';

        tree.render({
            elem: '#menu-tree',
            data: menus,
            showCheckbox: true,  // 是否显示复选框
            onlyIconControl: true,  // 是否仅允许节点左侧图标控制展开收缩
            id: 'demo-id-1',
            accordion: true,
            isJump: false, // 是否允许点击节点时弹出新窗口跳转
            click: function (obj) {

            },
            oncheck: function (obj) {

            }
        });

        // 保存用户角色
        form.on('submit(save-user-role)', function (data) {
            let field = data.field;
            http.post('{{ auth_route('permission/saveUserRoles') }}', field).then(res => {
                toast.top(res);
            });
            return false;
        });

        // 保存用户菜单
        form.on('submit(save-user-menu)', function (data) {
            let menu_ids = [];
            let choose = tree.getChecked('demo-id-1');
            for (let i in choose) {
                menu_ids.push(choose[i]['id']);
                let children = choose[i]['children'];
                for (let c in children) {
                    menu_ids.push(children[c]['id']);
                }
            }
            if (menu_ids.length === 0) {
                toast.top('请选择菜单');
                return false;
            }

            http.post('{{ auth_route('permission/saveUserMenus') }}', {
                user_id: user_id,
                menu_ids: menu_ids
            }).then(res => {
                toast.top(res);
            });
            return false;
        });

        // 保存用户权限
        let checked_rule_ids = JSON.parse('{{ has_rules|json_encode|raw }}');
        console.log(checked_rule_ids,'checked_rule_ids')
        form.on('checkbox(rules)', function (data) {
            let elem = data.elem;
            let index = checked_rule_ids.indexOf(elem.value);
            if (elem.checked) {
                if (index === -1) {
                    checked_rule_ids.push(elem.value);
                }
            } else {
                if (index >= 0) {
                    checked_rule_ids.splice(index, 1);
                }
            }
            console.log(checked_rule_ids)
        });
        form.on('submit(save-user-rule)', function (data) {
            http.post('{{ auth_route('permission/saveUserRules') }}', {
                user_id: user_id,
                rule_ids: checked_rule_ids
            }).then(res => {
                toast.top(res);
            });
            return false;
        });

    });
</script>